<template>
  <div>

    <h3>整体统计</h3>
    <el-descriptions :column="3" class="margin-top" border>
      <el-descriptions-item>
        <template slot="label">
          考试名称
        </template>
        {{ detail.title }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          开放类型
        </template>
        {{ detail.openType_dictText }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          应考人数
        </template>
        {{ statData.totalUser }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          实考人数
        </template>
        {{ statData.actualUser }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          缺考人数
        </template>
        {{ statData.missUser }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          通过人数
        </template>
        {{ statData.passUser }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          通过比例
        </template>
        {{ statData.passRate }}%
      </el-descriptions-item>
    </el-descriptions>

    <h3>
      明细情况
    </h3>

    <el-card>

      <el-tabs v-model="activeName">
        <el-tab-pane label="人员概览" name="first">
          <stat-user :exam-id="examId" />
        </el-tab-pane>
        <el-tab-pane label="部门概览" name="second">
          <stat-depart :exam-id="examId" />
        </el-tab-pane>
        <el-tab-pane label="错题分析" name="third">
          <stat-qu :exam-id="examId" />
        </el-tab-pane>
        <el-tab-pane name="fourth">
          <span slot="label">考试分析 <img src="@/assets/exam/corner_mark.png" class="cornerMark"></span>
          <large-model-analysis :exam-id="examId" />
        </el-tab-pane>
      </el-tabs>
    </el-card>

  </div>

</template>

<script>
import StatUser from '@/views/admin/exam/exam/components/stat-user'
import StatDepart from '@/views/admin/exam/exam/components/stat-depart'
import { simpleDetail } from '@/api/exam/exam'

import { apiExamOverview } from '@/api/stat/exam'
import StatQu from '@/views/admin/exam/exam/components/stat-qu'
import LargeModelAnalysis from '@/views/admin/exam/exam/components/large-model-analysis'

export default {
  components: { StatQu, StatDepart, StatUser, LargeModelAnalysis },
  data() {
    return {
      activeName: 'first',
      examId: '',
      statData: '',
      onlineList: [],
      detail: {}
    }
  },

  created() {
    // 获取考试信息
    this.examId = this.$route.params.examId

    // 获取数据
    this.fetchData()
  },
  methods: {

    fetchData() {
      apiExamOverview(this.examId).then(response => {
        this.statData = response.data
      })

      simpleDetail(this.examId).then(response => {
        this.detail = response.data
      })
    }
  }
}
</script>

<style scoped>

.stat-item{
  line-height: 38px;
  font-size: 14px;
  color: #333;
}

.stat-item span{
  color: #666;
}
.cornerMark {
  position: absolute;
  width: 60px;
  height: 18px;
  margin-bottom: 5px;
}

/deep/
.el-descriptions-item__label{
  width: calc(100vw / 12)
}

/deep/
.el-descriptions-item__content{
  width: calc(100vw / 4);
}

</style>

